import React from 'react';
import { history } from 'umi'
// import { Divider, Empty, message, Spin } from 'antd';
import { Tabs, Row, Spin, Icon, Empty } from 'antd';
// import { PageContainer, DividerContainer } from '@/molecules';
import { PageContainer } from '@/molecules';
import { useRequest, defaultFormatResult } from '@/hooks';
import { newTabProps } from '@/utils/tab';
// import { Icon } from '@/pages/Recruitment/components';
import { PersonalCard } from './containers';
import { DetailSteps } from './components';
import TrialDetail from './TrialDetail';
// import { getTrialInfoList, getFeedbackNum, getInformalEmployeeInfo, getInformalDetail } from './services';
import { getTrialInfoList, getInformalEmployeeInfo } from './services';
import styles from './index.less';

const formatList = list => {
    if (!list) return [];
    return list.map(item => ({
        title: item?.statusName || '',
        description: item?.remark || '',
        date: item?.createTime || '',
        ...item
    }));
};

const Detail = ({ location }) => {
    const { query } = location;
    const { activeKey = 'trial' } = query;
    const [stepShow, setStepShow] = React.useState(true);

    // const { data: informalDetail, loading: informalLoading } = useRequest(() => getInformalDetail(query?.id), {
    //     refreshDeps: [query?.id],
    //     ready: !!query?.id,
    //     ...defaultFormatResult
    // });

    const { data: employeeInfo, loading: infoLoading } = useRequest(
        () => getInformalEmployeeInfo(query?.employeeCode),
        {
            refreshDeps: [query?.employeeCode],
            ready: !!query?.employeeCode,
            ...defaultFormatResult
        }
    );

    const { data: infoList, loading } = useRequest(() => getTrialInfoList(query?.employeeCode), {
        refreshDeps: [query?.employeeCode],
        ready: !!query?.employeeCode,
        ...defaultFormatResult
    });

    const handleDetail = ({ id, status, employeeCode, processInstanceId }) => {
        let route = {
            pathname: '/office/personnelManagement/onboardAndLeave/informal/process/detail',
            query: { id }
        };
        let extra = newTabProps;
        if (status === 'newEntry') {
            route = {
                pathname: '/office/personnelManagement/onboardAndLeave/entryManage/entryEmployeeDetail',
                query: { entryPersonnelCode: employeeCode }
            };
            extra = {};
        } else if (status === 'regularPass' || status === 'regularApproval') {
            route = {
                pathname: '/personal/portal/myApplication/detail',
                query: {
                    processInstanceId
                }
            };
            extra = {};
        }
        history.push({
            ...route,
            ...extra
        });
    };

    const allLoading = infoLoading || loading;

    const handleTabChange = () => {};

    return (
        <PageContainer loading={loading || infoLoading}>
            {/* <Spin spinning={feedbackLoading}> */}
            <div style={{ display: 'flex' }}>
                <div style={{ flex: 1 }}>
                    <PersonalCard data={employeeInfo} />
                </div>
                {/* <div style={{ display: 'inline-block' }}>
                        <DividerContainer style={{ padding: '24px 50px' }}>
                            <Icon title="试用反馈" type="shiyongfankui" onClick={fetchFeedbackNum} />
                            <Icon title="沟通新员工" type="goutong" onClick={() => {}} />
                        </DividerContainer>
                    </div> */}
            </div>
            <Spin spinning={allLoading}>
                <Row type="flex" style={{ marginTop: '20px' }}>
                    <Tabs
                        type="card"
                        className={styles.cardTabs}
                        activeKey={activeKey}
                        onChange={handleTabChange}
                        style={{ flex: 1 }}
                    >
                        <Tabs.TabPane tab="试用评估" key="trial">
                            <TrialDetail />
                        </Tabs.TabPane>
                    </Tabs>
                    <div
                        style={{
                            position: 'relative',
                            marginTop: 39,
                            width: stepShow ? 64 : 33,
                            borderTop: '1px solid rgb(232, 232, 232)'
                        }}
                    >
                        <div
                            className={styles.stepArrowIcon}
                            onClick={() => {
                                setStepShow(val => !val);
                            }}
                        >
                            <Icon type={stepShow ? 'right' : 'left'} />
                        </div>
                        <div className={styles.splitLine}></div>
                    </div>
                    <div
                        style={{
                            width: stepShow ? 280 : 0,
                            opacity: stepShow ? 1 : 0,
                            maxHeight: stepShow ? 99999 : 0,
                            overflow: stepShow ? 'initial' : 'hidden',
                            transition: 'all 0.8s ',
                            flex: 'none',
                            marginTop: 39,
                            paddingTop: 20,
                            borderTop: '1px solid rgb(232, 232, 232)'
                        }}
                    >
                        <DetailSteps dataSource={formatList(infoList)} onClick={handleDetail} />
                        {infoList && infoList.length === 0 && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                    </div>
                </Row>
            </Spin>
        </PageContainer>
    );
};

export default Detail;
